<template>
	<view class="content">
		<view class="book">
			<view class="book-title flex-center-col">TEAM WANG design<br>「UNDER THE CASTLE」限定集市</view>
			<view class="book-description">Under the Castle
				的奇幻之夜来临，萌萌的胖奇（Pumpkie）与小机灵鬼小奇（Spookie）在城堡里展开了一系列搞笑的捣蛋行径，然后成为一对无忧无虑的欢喜冤家。胖奇和小奇携手四处探险，他们最终完成了种种挑战，碰见了照亮前方的秘宝，而他们决定将秘宝留给充满勇气的你们。新的挑战者们，请准备好，奇幻的旅程即将开始。
			</view>
			<view class="splitor flex-center">
				<view class="point" style="background: #1f1f1f;"></view>
				<view class="points">......</view>
				<view class="point"></view>
			</view>
			<view class="book-info">
				<view class="info-title">填写预约信息</view>
				<view class="input-box">
					<input class="username" :class="isNameTip && 'red-tip'" v-model="curInfo.username"
						placeholder="您的姓名" placeholder-color="#A3A3A3" @focus="() => { isNameTip = false }" />
					<radio-group @change="radioChange">
						<label>
							<radio class="custom-radio" value="先生" :checked="isManChecked" />
							<view class="label-name" :style="{ color: curInfo.gender == '先生' ? '#1F1F1F' : '#A3A3A3' }">
								先生</view>
						</label>
						<label>
							<radio class="custom-radio" value="女士" :checked="!isManChecked" />
							<view class="label-name" :style="{ color: curInfo.gender == '女士' ? '#1F1F1F' : '#A3A3A3' }">
								女士
							</view>
						</label>
					</radio-group>
				</view>
				<view class="number-box" :class="isPhoneTip && 'red-tip'">
					<input class="mobilenumber" v-model="curInfo.mobile" placeholder="手机号码" placeholder-color="#A3A3A3"
						@focus="() => { isPhoneTip = false }" />
					<button class="tip" plain="true" open-type="getPhoneNumber"
						@getphonenumber="getPhoneNumber">微信授权</button>
				</view>
			</view>
			<view class="instructions">
				<view class="instructions-title">排队入口的说明</view>
				<view class="instructions-content">活动期间，通过小程序预约的参与者仅限南京西路入口处进行预约核销进入；选择线下排队则从镇宁路入口处排队进入。</view>
				<view class="instructions-content2">
					您所提供给我们的个人信息会被用来向您提供产品或服务(包括订购、售后、预约)、传送营销通讯、进行市场分析和发送相关通知等。有关我们如何使用您的个人信息，请参阅我们的隐私条款。</view>
				<checkbox-group @change="checkChange">
					<label class="checkbox">
						<checkbox class="custom-checkbox" value="选中" />我已阅读并同意本次<text class="underline"
							@click="toRule('rule')">活动规则</text>和<text class="underline"
							@click="toRule('person')">隐私条款</text>
					</label>
				</checkbox-group>
			</view>
			<view style="height: 82px">
				<button class="black-btn" @click="next">下一步</button>
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapState,
	mapMutations,
	mapActions
} from 'vuex';
export default {
	data() {
		return {
			curInfo: {},//当前用户信息
			isNameTip: false,//是否必填提示
			isPhoneTip: false,//是否必填提示
			isRuleChecked: 0,//判断是否选中规则复选框
			isManChecked: true,//判断是否选中先生,默认选中
		}
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo, // 确保这里引用正确
			registerType: state => state.user.registerType
		}),
	},
	onLoad(options) {
		console.log('加载预约', options);
		// 初始化用户信息
		const scene = decodeURIComponent(options.scene);//线下通过扫码进入预约页
		let type = scene?.split('=')?.[1];
		if (type == 'offline') {
			// 线下登录 this.userInfo, uni.getStorageSync('userInfo')为空需要重新调用登录
			this.login('offline').then(() => {
				console.log('线下登录成功', this.registerType, this.userInfo, uni.getStorageSync('userInfo'));
				this.curInfo = this.userInfo;
				if (this.curInfo.gender == '先生') {
					this.isManChecked = true;
				} else {
					this.isManChecked = false;
				}
			});
		} else {
			// 线上
			this.curInfo = this.userInfo;
			if (this.curInfo.gender == '先生') {
				this.isManChecked = true;
			} else {
				this.isManChecked = false;
			}
		}
	},
	methods: {
		...mapMutations(['setUserInfo',]),
		...mapActions(['login',]),
		radioChange(e) {
			console.log('radio发生change事件，携带value值为：', e.detail.value)
			this.curInfo.gender = e.detail.value;
		},
		checkChange(e) {
			console.log('check发生change事件，携带value值为：', e.detail.value)
			this.isRuleChecked = e.detail.value.length;
		},
		getPhoneNumber(e) {
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
				// 用户同意授权获取手机号，e.detail 中包含加密信息
				console.log(e.detail);
				// 调用后端接口，传递加密信息进行手机号解密
				this.$http.getPhone({ code: e.detail.code }).then(res => {
					console.log('获取手机号', res.phone_info.phoneNumber);
					this.curInfo.mobile = res.phone_info.phoneNumber;
				})
			} else {
				// 用户拒绝授权
				console.log('用户拒绝授权');
			}
		},
		next() {
			if (!this.curInfo.gender) this.curInfo.gender = '先生';
			this.$http.updateUserInfo({
				username: this.curInfo.username,
				mobile: this.curInfo.mobile,
				gender: this.curInfo.gender,
			}).then(() => {
				uni.setStorageSync('userInfo', this.curInfo);
				this.setUserInfo(this.curInfo);
			})
			if (this.curInfo.username && this.curInfo.mobile && this.isRuleChecked) {
				if (this.registerType == 'online') {
					// 线上跳转选择预约时间
					uni.navigateTo({
						url: '/packageA/bookInfo/bookInfo'
					});
				} else {
					// 线下直接跳转预约详情
					this.$http.createOfflineBook({
						address: '上海市静安区南京西路永源浜',
					}).then((res) => {
						uni.navigateTo({
							url: '/packageA/bookDetail/bookDetail?bookId=' + res.id + '&type=new'
						});
					})
				}
			} else if (!this.curInfo.username) {
				this.isNameTip = true;
			} else if (!this.curInfo.mobile) {
				this.isPhoneTip = true;
			}
		},
		toRule(type) {
			uni.navigateTo({
				url: '/packageA/bookRule/bookRule?type=' + type
			});
		},
	}
}
</script>

<style lang="scss" scoped>
.book {
	width: 100%;
	max-height: 100%;
	overflow-y: auto;
}

.book-title {
	width: auto;
	padding: 0 18px;
	margin: 20px 0 25px 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 20px;
}

.book-description {
	width: auto;
	padding: 0 18px;
	font-size: 12px;
	line-height: 20px;
	color: $tip-color;
}

.splitor {
	width: auto;
	padding: 0 18px;
	margin: 30px 0;

	.point {
		width: 10px;
		height: 10px;
		border-radius: 50%;
		border: 1px solid $primary-color;
		margin: 0 12px;
	}

	.points {
		position: relative;
		bottom: 5px;
		color: $gray-color;
	}
}

.book-info {
	width: auto;
	padding: 0 18px;

	.info-title {
		font-size: 14px;
		font-weight: 600;
		margin-bottom: 20px;
	}

	.red-tip {
		border: 1px solid red !important;
	}

	.input-box {
		display: flex;
		justify-content: flex-start;
		align-items: center;

		.username {
			flex: 1;
			height: 44px;
			border: 1px solid $tip2-color;
			font-size: 14px;
			padding: 0 18px;
		}

		radio-group {
			flex: 1;
			display: flex;
			justify-content: space-around;
			align-items: center;

			label {
				display: flex;
				justify-content: center;
				align-items: center;

				.label-name {
					font-size: 14px;
					font-weight: 600;
					color: $tip2-color;
				}

				.custom-radio {
					/deep/ .wx-radio-input {
						width: 14px;
						height: 14px;
						color: $tip2-color;
						border: 1px solid $tip2-color;
					}

					/deep/ .wx-radio-input.wx-radio-input-checked {
						/* 选中的样式 */
						width: 14px;
						height: 14px;
						color: $primary-color;
						background-color: #fff;
						border: 1px solid $primary-color;
					}

					/deep/ .wx-radio-input.wx-radio-input-checked::before {
						/* 选中后的勾选样式 */
						width: 9px;
						height: 9px;
						background-color: $primary-color;
						border-radius: 50%;
						color: transparent;
					}
				}
			}
		}
	}

	.number-box {
		flex: 1;
		height: 44px;
		border: 1px solid $tip2-color;
		margin-top: 12px;
		position: relative;

		input {
			width: 70%;
			height: 44px;
			font-size: 14px;
			color: $primary-color;
			padding: 0 18px;
		}

		&::after {
			content: '';
			width: 1px;
			height: 20px;
			background: $tip2-color;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 100px;
		}

		.tip {
			position: absolute;
			right: 18px;
			top: 50%;
			transform: translateY(-50%);
			font-size: 14px;
			font-weight: 600;
			background-color: transparent;
			border: none;
			outline: none;
		}
	}
}

.instructions {
	width: auto;
	padding: 0 18px;
	margin: 20px 0;

	.instructions-title {
		font-size: 14px;
		font-weight: 600;
	}

	.instructions-content {
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 1px;
		color: $tip2-color;
		margin: 15px 0 20px 0;
	}

	.instructions-content2 {
		font-size: 12px;
		color: $tip-color;
		margin-bottom: 49px;
	}

	.checkbox {
		font-size: 12px;
		letter-spacing: 1.5px;

		.custom-checkbox {
			/deep/ .wx-checkbox-input {
				/* 未选中的样式 */
				width: 14px;
				height: 14px;
				border: 1px solid $tip2-color;
			}

			/deep/ .wx-checkbox-input.wx-checkbox-input-checked {
				/* 选中的样式 */
				border: 1px solid $primary-color;
				color: $primary-color;
			}

			/deep/ .wx-checkbox-input.wx-checkbox-input-checked::before {
				/* 选中后的勾选样式 */
				color: $primary-color;
			}

		}

		.underline {
			color: #0D7FAE;
			border-bottom: 1px solid #0D7FAE;
			font-weight: 600;
		}
	}
}
</style>
